<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link rel="stylesheet" href="../css/代办列表.css">
</head>
<body>
<div class="container">
    <h1>代办列表</h1>
    <input type="text" id="taskInput" placeholder="请输入内容...">
    <button onclick="addTask()">提交</button>
    <ul id="taskList"></ul>
</div>
<script>
    function addTask() {
        var taskInput = document.getElementById('taskInput');
        var taskText = taskInput.value.trim();
        if (taskText === '') {
            alert('请输入任务内容!');
            return;
        }
        var taskList = document.getElementById('taskList');
        var li = document.createElement('li');
        li.innerHTML = '<input type="checkbox" onclick="toggleComplete(this)"> ' + taskText + ' <button onclick="deleteTask(this)">Delete</button>';
        taskList.appendChild(li);
        taskInput.value = '';
    }

    function deleteTask(button) {
        var li = button.parentNode;
        li.parentNode.removeChild(li);
    }

    function toggleComplete(checkbox) {
        var li = checkbox.parentNode;
        if (checkbox.checked) {
            li.classList.add('completed');
        } else {
            li.classList.remove('completed');
        }
    }
</script>
</body>
</html>
